/**
 * 预约
 * page预约
 */
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:qgchat/bloc/blocProvider.dart';
import 'package:qgchat/bloc/msg/make.dart';
import 'package:qgchat/common/action/index.dart';
import 'package:qgchat/common/class/date/index.dart';
import 'package:qgchat/common/class/videoCall/index.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/http/models/appointmentListModel.dart';
import 'package:qgchat/widgets/easyRefreshWidget.dart';
import 'package:qgchat/widgets/noData.dart';
import 'package:qgchat/widgets/avatar.dart';
import 'package:qgchat/widgets/tipsDialog.dart';

class Make extends StatefulWidget {
  Make({Key key}) : super(key: key);

  @override
  _MakeState createState() => _MakeState();
}

class _MakeState extends State<Make> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbarHandle(),
      body: bodyHandle(),
    );
  }

  // 生成appbar
  Widget appbarHandle() {
    return PreferredSize(
      preferredSize: Size.fromHeight(px(88)),
      child: AppBar(
        centerTitle: true,
        title: Text(
          "预约",
          style: TextStyle(
            color: Colors.black,
            fontSize: px(34),
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  // 生成body
  Widget bodyHandle() {
    final MakeBloc bloc = BlocProvider.of<MakeBloc>(context);
    return StreamBuilder(
      stream: bloc.makeStream,
      builder: (
        BuildContext context,
        AsyncSnapshot snapshot,
      ) {
        if (snapshot.hasData) {
          List<AppointmentListModel> list = snapshot.data;
          if (list.isEmpty) {
            return NoData("暂无预约");
          } else {
            return Container(
              color: Colors.white,
              child: EasyRefresh(
                header: EasyRefreshSetting.header,
                footer: EasyRefreshSetting.footer,
                onRefresh: () async {
                  bloc.onRefresh();
                },
                onLoad: () async {
                  bloc.getMake();
                },
                child: ListView(
                  children: list.map<Widget>((f) {
                    return makeAnchorHandle(f);
                  }).toList(),
                ),
              ),
            );
          }
        } else {
          return Container();
        }
      },
    );
  }

  // 生成主播列表
  Widget makeAnchorHandle(AppointmentListModel item) {
    return Container(
      height: px(160),
      padding: EdgeInsets.symmetric(horizontal: px(30)),
      child: Row(
        children: <Widget>[
          Avatar(
            item.memberHead,
            true,
            token: item.memberToken,
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.only(left: px(23)),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: col("edeff2"),
                    width: 1,
                  ),
                ),
              ),
              child: Column(
                children: <Widget>[
                  // 昵称和时间
                  Container(
                    margin: EdgeInsets.only(top: px(35)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          "${item.memberNickname}",
                          style: TextStyle(
                            height: .95,
                            color: col("303133"),
                            fontSize: px(34),
                          ),
                        ),
                        Text(
                          "${Date.simple(int.parse(item.createtime), format: "y-m-d h:i")}",
                          style: TextStyle(
                            height: .99,
                            color: col("bfc2cc"),
                            fontSize: px(26),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 金币和预约时间
                  Container(
                    margin: EdgeInsets.only(top: px(20)),
                    child: stateBuilder(context, 'user', (user) {
                      List<Widget> list = [];
                      if (user.info.memberType == 0) {
                        // 普通用户
                        list.addAll([Container(), makeTime(item)]);
                      } else {
                        // 主播
                        list.addAll([buildGold(item), callback(item)]);
                      }
                      return Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: list,
                      );
                    }),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  // 回拨
  Widget callback(AppointmentListModel item) {
    if (item.status == 0) {
      return Container(
        width: px(110),
        height: px(48),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: col("ff6c8c"),
          borderRadius: BorderRadius.circular(px(24)),
        ),
        child: FlatButton(
          onPressed: () {
            TipsDialog.tryToCallback(context, item.memberNickname, () {
              VideoCall.checkUserStatusAndGoVideoPage(context, item.memberToken,
                  callbackId: item.id);
            });
          },
          padding: EdgeInsets.symmetric(horizontal: px(25)),
          shape: RoundedRectangleBorder(
            side: BorderSide.none,
            borderRadius: BorderRadius.all(Radius.circular(px(24))),
          ),
          child: Text(
            "回拨",
            style: TextStyle(
              color: Colors.white,
              fontSize: px(26),
            ),
          ),
        ),
      );
    } else {
      return Container(
        width: px(110),
        height: px(48),
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(horizontal: px(25)),
        decoration: BoxDecoration(
          color: col("d9d9d9"),
          borderRadius: BorderRadius.circular(px(24)),
        ),
        child: Text(
          "回拨",
          style: TextStyle(
            color: Colors.white,
            fontSize: px(26),
          ),
        ),
      );
    }
  }

  // 金币和预约时间
  Widget buildGold(AppointmentListModel item) {
    return Container(
      child: Row(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: px(10)),
            child: Image.asset(
              "assets/images/icon/star.png",
              width: px(32),
              height: px(32),
            ),
          ),
          Text(
            "${item.gold}",
            style: TextStyle(
              height: .99,
              color: col("fea800"),
              fontSize: px(28),
            ),
          ),
        ],
      ),
    );
  }

  // 生成预约计时
  Widget makeTime(AppointmentListModel item) {
    // 失效样式
    Widget invalidStyle = Container(
      height: px(48),
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: px(25)),
      decoration: BoxDecoration(
        color: col("f5f7fa"),
        borderRadius: BorderRadius.circular(px(24)),
      ),
      child: Text(
        "已失效",
        style: TextStyle(
          color: col("909399"),
          fontSize: px(26),
        ),
      ),
    );

    // 预约倒计时进度条
    Widget countdownStyle = Container(
      width: px(166),
      height: px(48),
      decoration: BoxDecoration(
        color: col("f5f7fa"),
        borderRadius: BorderRadius.circular(px(24)),
      ),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            left: 0,
            child: Container(
              width: px(166) * 0.7,
              height: px(48),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/icon/loading.png"),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.circular(px(24)),
              ),
            ),
          ),
          Text(
            "23:59:59",
            style: TextStyle(
              color: Colors.white,
              fontSize: px(26),
            ),
          ),
        ],
      ),
    );

    return Container(
      height: px(48),
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: px(25)),
      decoration: BoxDecoration(
        color: col("f5f7fa"),
        borderRadius: BorderRadius.circular(px(24)),
      ),
      child: Text(
        "${CommonAction.checkAnchorStatus(
          item.disturb,
          item.online,
        ).text}",
        style: TextStyle(
          color: col("909399"),
          fontSize: px(26),
        ),
      ),
    );
    // if (false) {
    //   return countdownStyle;
    // } else {
    //   return invalidStyle;
    // }
  }
}

class SpaceHeader {}
